<template>
  <div class="UserSearchPicker">
    <a-select
        labelInValue
        show-search
        defaultActiveFirstOption
        allowClear
        :filter-option="false"
        dropdownClassName="UserSearchPickerDropDown"
        v-model:value="value"
        :mode="mode"
        style="width: 100%"
        placeholder="姓名/工号/全拼"
        :max-tag-count="2"
        :options="options"
        @search="fetchUser"
        @change="onChange"
    >
      <template #option="option">
        <div class="selectOption">
          <span class="name">{{ option.name }}</span>
          <span class="empNo">{{ option.empNo }}</span>
          <span class="org">{{ option.orgName }}</span>
        </div>
      </template>
    </a-select>
  </div>
</template>
<script setup name="MemberSearchPicker">
import { watch } from 'vue'
import userApi from '@/api/sys/userApi'
import { debounce } from 'lodash'

const props = defineProps({
  //'multiple' | 'tags' | 'combobox'
  mode: {
    type: String,
    default: 'combobox'
  },
  modelValue: {
    type: [Array, String, Number],
    required: false
  }
})

const emit = defineEmits(['ids', 'members', 'update:modelValue'])
const options = ref([])
const value = ref(undefined)

const pageConfig = ref({
  current: 1,
  size: 15,
  end: false
})
const fetchUser = debounce((str) => {
  userApi
      .userPage({
        current: pageConfig.value.current,
        size: pageConfig.value.size,
        searchKey: str
      })
      .then((res) => {
        options.value = res.records.map((r) => {
          r.value = r.id
          r.label = r.name
          return r
        })
      })
})

onMounted(() => {
  fetchUser()
})

/**
 * 初始数据
 * @param {*} value
 */
const initData = (newVal) => {
  if(newVal) {
    if(newVal != value.value) {
      value.value = newVal
    }
  } else {
    value.value = null
  }
}

/**
 * 监听值变化
 */
watch(
    () => props.modelValue,
    (newVal) => {
      initData(newVal)
    }
)

const onChange = (val) => {
  if (val) {
    if (Array.isArray(val)) {
      emit(
          'update:modelValue',
          val.map((res) => {
            return res.value
          })
      )
      emit(
          'ids',
          val.map((res) => {
            return res.value
          })
      )
      emit(
          'members',
          val.map((res) => {
            return res.option
          })
      )
    } else {
      emit('update:modelValue', val.value)
      emit('ids', [val.value])
      emit('members', [val.option])
    }
  } else {
    emit('ids', undefined)
    emit('members', undefined)
  }
}
</script>
<style lang="less">
.UserSearchPickerDropDown {
  .selectOption {
    width: 100%;

    display: flex;
    align-items: center;

    .name {
      font-weight: bold;
      font-size: 14px;
      margin-right: 12px;
      flex: 0 0 50px;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .empNo {
      font-size: 12px;
      margin-right: 12px;
      flex: 0 0 50px;
    }

    .org {
      font-size: 12px;
      margin-right: 12px;
      color: #8a8f97;
      flex: 0 1 100%;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
